<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ include file="commons/header.jsp" %>
    <style>
        /*tdoby{*/
        /*    padding: 50%;*/

        /*    vertical-align: middle !important;*/

        /*}*/

        .add-at{

            padding-bottom:30px !important;
        }
        /*#userDataTable{*/
        /*    vertical-align: middle !important;*/
        /*}*/



    </style>



<div style="background-color: #ffffff; border-radius: 3px; padding:12px;margin-top: 20px">
    <div class="container-fluid" >
        <div class="row">
            <div class="col-xs-12" >
                <table id="userDataTable" class="table table-hover table-bordered  table-sm">
                </table>

            </div>
        </div>

    </div>
    <!--修改地址后的模态框-->
    <div class="modal" id="id01" data-backdrop="">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框的正文部分 -->
                <div class="modal-header">
                    <!-- 右上角的 "X", 点击关闭的效果如何实现: data-dismiss="modal", 点击按钮会自动关闭模态框 -->
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h3 class="modal-title">修改收货地址</h3>
                </div>
                <div class="modal-body">
                    <form>

                        <div class="form-group">
                            <h4>原收货地址</h4>
                            <span id="editAgelkk"></span>
                        </div>
                        <div class="form-group">
                            <label>请输入最新的收货地址</label>
                            <input id="editPhonemnn" class="form-control" data-toggle="modal">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-primary">取消</button>
                    <button class="btn btn-success" onclick="updateArdress()">确定</button>
                </div>
            </div>
        </div>
    </div>







    <div class="modal" id="editUserModal" data-backdrop="">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框的正文部分 -->
                <div class="modal-header">
                    <!-- 右上角的 "X", 点击关闭的效果如何实现: data-dismiss="modal", 点击按钮会自动关闭模态框 -->
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h3 class="modal-title">修改收货地址</h3>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <h4>订单编号</h4>
                            <span id="editUser"></span>
                        </div>
                        <div class="form-group">
                            <h4>原收货地址</h4>
                            <span id="editAge"></span>
                        </div>
                        <div class="form-group">
                            <label>请输入最新的收货地址</label>
                            <input id="editPhone" class="form-control" data-toggle="modal">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-primary">取消</button>
                    <button class="btn btn-success" onclick="updateArdress()">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>

<%@ include file="commons/footer.jsp" %>
<script>
    $(function () {
        //初始化Table
        $('#userDataTable').bootstrapTable({
            url: '${pageContext.servletContext.contextPath}/order',//请求后台的URL（*） 这里我用的是一个json文件
            method: 'get',//请求方式（*）
            // toolbar: '#toolbar',//工具按钮用哪个容器
            striped: true,//是否显示行间隔色
            cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,//是否显示分页（*）
            sortable: false,//是否启用排序
            sortOrder: "asc",//排序方式
            // queryParams: queryParams,//传递参数（*）
            sidePagination: "server",//分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,//初始化加载第一页，默认第一页
            pageSize: 10,//每页的记录行数（*）
            pageList: [10, 25, 50, 100],//可供选择的每页的行数（*）
            // search: true,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端
            contentType: "application/x-www-form-urlencoded",
            strictSearch: true,
            showColumns: true,//是否显示内容列下拉框
            showRefresh: true,//是否显示刷新按钮
            minimumCountColumns: 2,//最少允许的列数
            clickToSelect: true,//是否启用点击选中行
            //这里如果要固定表头的话 就把height开启
            //height: 700,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            width:'50%',
            uniqueId: "id",//每一行的唯一标识，一般为主键列
            showToggle: true,//是否显示详细视图和列表视图的切换按钮
            cardView: false,//是否显示详细视图
            detailView: false,//是否显示父子表
            onLoadSuccess: function (data) {

                //数据加载成功后 进行合并  这里我只是同名合并projName subProj phase 如果需要合并更多的字段 仿照添加对应的代码就可以了
                mergeTable(data,"userDataTable");
            },
            columns: [
                {title:'商品图片',field:'ogoodImg',align: 'center',formatter:formatOGoodImg},
                {title: '订单ID', field: 'oid', align: 'center'},
                {title:'订单编号',field:'ono',key:'oId',align: 'center',class:'add-at'},
                {title:'价格',field:'ogoodPrice',align: 'center'},
                {title:'购买数量',field:'onum',align: 'center'},
                {title:'商品状态',field:'ostatus',align: 'center',formatter:formatOStatus},
                {title:'评价',field:'oappraiseStatus',align: 'center',formatter:formatOAppraiseStatus},
                // {title:'用户ID',field:'ouserId',align: 'center'},
                {title:'订单日期',field:'ocreateTime',align: 'center',formatter:formatOCreateTime},
                {title:'付款日期',field:'opayTime',align: 'center',formatter:formatOPayTime},
                {title:'商品ID',field:'ogoodId',align: 'center'},
                {title:'商品信息',field:'ogoodTitle',align: 'center',formatter: goodSpan},
                {title:'收货地址',field:'oAddress',align: 'center'},
                {title: '修改',field:'amend', align: 'center',formatter:addProccesBtns},
            ],
        });
    });


    //全局变量 ***如果每次只是发送ajax请求对table进行局部更新，则每次要合并前前都应该清空这三个变量 不然全局变量会一值追加结果
    var oNoNameCount="";
    var oAddressjNameCount="";
    var amendCount="";



    //合并表格
    //合并表格
    function mergeTable(data,userDataTable) {
        //每次合并表格前 都要将全局变量清空
        oNoNameCount = "";
        oAddressjNameCount = "";
        amendCount = "";

        var a = '#' + userDataTable;


        mergeCells(data.rows, 0, data.rows.length, "ono", $('' + a + ''));



        //对projName,subProjName,phase的次数进行分割
        //去掉末尾的逗号 有时候也可以不用去掉 还是去掉了我这里
        oNoNameCount = oNoNameCount.substring(0, oNoNameCount.length - 1);
        oAddressjNameCount = oAddressjNameCount.substring(0, oAddressjNameCount.length - 1);
        amendCount = amendCount.substring(0, amendCount.length - 1);


        var strArr1 = oNoNameCount.split(",");
        var strArr2 = oAddressjNameCount.split(",");
        var strArr3 = amendCount.split(",");

        //根据次数进行表格合并
        //合并projName
        var index = 0;
        for (var i = 0; i < strArr1.length; i++) {
            var count = strArr1[i] * 1;
            $('' + a + '').bootstrapTable('mergeCells', {index: index, field: "ono", colspan: 1, rowspan: count});
            index += count;
            // console.log("index=" + index)
        }
        //合并subProjName
        var index = 0;
        for (var i = 0; i < strArr2.length; i++) {
            var count = strArr2[i] * 1;
            $('' + a + '').bootstrapTable('mergeCells', {index: index, field: "oAddress", colspan: 1, rowspan: count});
            index += count;
            // console.log("Address=" + index)
        }

        //合并phaseName
        var index = 0;
        // for (var i = 0; i < strArr3.length; i++) {
        //     var count = strArr3[i] * 1;
        //     $('' + a + '').bootstrapTable('mergeCells', {index: index, field: "center", colspan: 1, rowspan: count});
        //     index += count;
        // }
        for (var i = 0; i < strArr1.length; i++) {
            var count = strArr1[i] * 1;
            $('' + a + '').bootstrapTable('mergeCells', {index: index, field: "amend", colspan: 1, rowspan: count});
            index += count;
            // console.log("index=" + index)
        }

        //排序后紧挨在一起 进行同名合并
        /**
         * 对于表格合并，首先要进行排序，即将同名的属性的记录排序紧挨在一起，这样才能最好的显示出合并想要的效果。
         * 因为此方法是拿第一个数据与后面的数据依次比较，
         * 例如，第一条记录的projName与第二条记录的projName来进行比较，两者相同，则继续第一条记录的projName与第三条记录的projName来进行比较，
         * 当不相同时，记录下此projName对应的值出现的次数，然后再开始从第三条记录的projName与第四条记录的projName来进行比较，依次循环下去，记
         * 录下相同内容的值出现的次数，到时候，再根据这些次数来进行合并
         *
         * 此方法主要是先拿到每个同名属性的值的相等次数，把次数利用全局变量存下来
         *
         * @param datas --表格数据,一般为表格的rows数据
         * @param startIndex --开始下标
         * @param size --从开始下标起，到size结束，遍历合并多少个
         * @param fieldName --计算算哪个列
         * @param target --table表格对象
         */
        function mergeCells(datas, startIndex, size, fieldName, target) {
            // console.log("startIndex:" + startIndex + "size:" + size + "---合并列:" + fieldName)
            //声明一个数组计算相同属性值在data对象出现的次数和
            //这里不能使用map，因为如果涉及到排序后，相同的属性并不是紧挨在一起,那么后面的次数会覆盖前面的次数，故这里用数组
            var sortArr = new Array();
            for (var i = startIndex; i < size; i++) {
                for (var j = i + 1; j < size; j++) {
                    if (datas[i][fieldName] != datas[j][fieldName]) {
                        //相同属性值不同
                        if (j - i > 1) {
                            sortArr.push(j - i);
                            i = j - 1;
                            //如果是最后一个元素 把最后一个元素的次数也装进去
                            if (i == size - 1 - 1) {
                                sortArr.push(1);
                            }
                        } else {
                            sortArr.push(j - i);
                            //如果j是最后一个元素 把最后一个元素的次数装进去
                            if (j == size - 1) {
                                sortArr.push(1);
                            }
                        }
                        break;

                    } else {
                        //相同属性值相同 直到最后一次的时候才会装 否则在他们的值不同时再装进去
                        if (j == size - 1) {
                            sortArr.push(j - i + 1);
                            //这里的赋值感觉有点多余 算了现就这个样子吧 不影响功能
                            i = j;
                        }
                    }
                }
            }
            // console.log("sortArr=" + sortArr);


            //遍历数组，将值装追加到对应的字符串后面
            for (var prop in sortArr) {
                /*这里在ie8上运行的时候 出现坑 最好遍历数组不要用for in 这里我用了就懒得换了
                下面加上如果prop是indexOf就停止 就解决了ie8出现的问题*/
                if (prop == "indexOf") {
                    continue;
                }
                if (fieldName == "ono") {
                    var count = sortArr[prop] * 1;
                    oNoNameCount += count + ",";
                }

                if (fieldName == "oAddress") {
                    var count = sortArr[prop] * 1;
                    oAddressjNameCount += count + ",";
                }

                if (fieldName == "center") {
                    var count = sortArr[prop] * 1;
                    amendCount += count + ",";
                }
            }

            for (var prop in sortArr) {
                if (prop == "indexOf") {
                    continue;
                }
                if (fieldName == "ono") {
                    //console.log("进入projName--此时开始index-"+startIndex+"--结束index--"+(startIndex+sortArr[prop])*1);
                    startIndex = 0;
                    //subProjName每次进去的startIndex为前面次数的和
                    if (oAddressjNameCount.length > 0) {
                        //console.log("subProjNameCount-"+subProjNameCount);
                        var temp = oAddressjNameCount.substring(0, oAddressjNameCount.length - 1);
                        var strArr1 = temp.split(",");
                        for (var i = 0; i < strArr1.length; i++) {
                            var count = strArr1[i] * 1;
                            startIndex += count;
                        }
                    }

                    if (sortArr[prop] > 1) {
                        mergeCells(datas, startIndex, startIndex + sortArr[prop], "oAddress", target);
                    } else {
                        //当projName的次数为1就不进入循环
                        oAddressjNameCount += 1 + ",";
                    }
                }
                if (fieldName == "oAddress") {
                    startIndex = 0;
                    if (amendCount.length > 0) {
                        //console.log("phaseCount-"+phaseCount);
                        var temp = amendCount.substring(0, amendCount.length - 1);
                        //phaseCount = phaseCount + ",";
                        var strArr1 = temp.split(",");
                        for (var i = 0; i < strArr1.length; i++) {
                            var count = strArr1[i] * 1;
                            startIndex += count;
                        }
                    }
                    if (sortArr[prop] > 1) {
                        //console.log("进入subProj--此时开始index-"+startIndex+"--结束index--"+(startIndex+sortArr[prop])*1);
                        mergeCells(datas, startIndex, startIndex + sortArr[prop], "center", target)
                    } else {
                        amendCount += 1 + ",";
                    }
                }
            }
        }

    }







    //修改商品状态
    function formatOStatus(value,row,index) {
        if (value==0){
            return '未支付';
        }
        if (value==1){
            return '已支付';
        }
        if (value==2){
            return '取消';
        }
        if (value==3){
            return '过期';
        }
        if (value==4){
            return '申请退款状态';
        }
        if (value==5){
            return '退款中';
        }
        if (value==6){
            return '退款成功';
        }
        if (value==7){
            return '已完成';
        }
        if (value==8){
            return '发货中';
        }

    }

    //修改评价
    function formatOAppraiseStatus(value,row,index) {
        return value==0?'待评价':'已评价';
    }

    //导入商品图片
    function formatOGoodImg(value) {
        return '<img src="http://localhost/'+value+'" width="50px"></img>';
    }


    //格式化订单日期
    function formatOCreateTime(value) {
        return moment(value).format('YYYY-MM-DD HH:mm:ss')
    }
    //格式化付款日期
    function formatOPayTime(value) {
        return moment(value).format('YYYY-MM-DD HH:mm:ss')
    }
    //修改按钮
    function addProccesBtns(value, row) {
        // console.log(row);
        // alert(row.oNo)
        // 保证不用科学计数显示
        const ono = row.ono.toString()
        const oAddress = row.oAddress?row.oAddress.toString():""
        // console.log(oAddress)
        const oNo1 =ono.slice(0,ono.length/2);
        const oNo2 =ono.slice(ono.length/2,ono.length);
        const btns ='<button class="btn btn-success btn-xs" onclick="editUser('+ oNo1+','+ oNo2+',\''+oAddress+'\')">修改收货地址</button>';
        return btns;
    }
    //模态框修改地址
    function editUser(oNo1,oNo2,oAddre) {
        // var a = userId.toString();
        // alert(number);
        // console.log(userId);

        $('#editUserModal').modal('show');
        $('#editUser').html(oNo1.toString()+oNo2.toString());
        $('#editAge').html(oAddre);
    }
    // 鼠标悬浮显示信息
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })
    // 鼠标悬浮显示信息,商品简单显示
    function goodSpan(value, row) {
        const oGoodTitle = row.ogoodTitle.toString()
        const oGoodTitle_10 =oGoodTitle.slice(0,15);
        // console.log(oGoodTitle)
        // console.log(oGoodTitle.length)
        // console.log(oGoodTitle_10)
        // console.log(oGoodTitle_10.length)
        const sSpan ='<span  data-toggle="tooltip" data-placement="left" title="'+oGoodTitle+'">'+oGoodTitle_10+'...</span>';
        return sSpan;
    }





    /**
     * $.ajax({
    url:"http://www.microsoft.com",    //请求的url地址
    dataType:"json",   //返回格式为json
    async:true,//请求是否异步，默认为异步，这也是ajax重要特性
    data:{"id":"value"},    //参数值
    type:"GET",   //请求方式
    success:function(req){
        //请求成功时处理
    },
     */
    function updateArdress() {
        var AddressOld = $('#editUser').text();
        var AddressNew = $('#editPhone').val();
        console.log(AddressNew)
        console.log(AddressOld)

        var data = {
            oNO: AddressOld,
            AddressNew: AddressNew,
        }
        // data = JSON.stringify(data);
        // console.log(data);
        // contentType: "application/json",表示传入参数的格式

        $.ajax({
            url: "${pageContext.servletContext.contextPath}/address/"+AddressOld+"/"+AddressNew,
            method: "get",
            sync: false,
            // contentType: "json",
            // contentType: "application/json",

            // dataType : "string",

            success: function (respStr) {
                // var resp = JSON.parse(respStr);
                console.log("respStr:"+respStr)

                    if (respStr == 1) {
                        window.location.href = "ordex00001.jsp";
                    } if(respStr==0) {
                        console.log("订单错误")
                        Lobibox.notify('error', {
                            delay: 1500,
                            size: 'mini',
                            msg: '订单错误！！请认真核对'
                        })
                    }
                }


        })
    }

</script>
</div>


